<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>商家列表</p>
		</header>

		<!-- 商家列表部分 -->
		<ul class="business">
			<li v-for="item in businessArr" :key="item.businessId" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					<div class="business-img-quantity" v-show="item.quantity > 0">{{ item.quantity }}</div>
				</div>
				<div class="business-info">
					<h3>{{ item.businessName }}</h3>
					<p>&#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送</p>
					<p>{{ item.businessExplain }}</p>
				</div>


			</li>
		</ul>

		<!-- 底部菜单部分 -->
		<!-- <Footer /> -->
	</div>
</template>

<script>
import { ref, onMounted, onBeforeMount } from 'vue';
import Footer from '../components/Footer.vue';
import axios from 'axios';
import qs from 'qs';
import { useRoute, useRouter } from 'vue-router';
import BackButton from '../components/BackButton.vue';
export default {
	name: 'BusinessList',
	components: {
		Footer
	},
	setup() {
		const orderTypeId = ref(null);
		const businessArr = ref([]);
		const businessId = ref([]);
		const favarr = ref([]);
		const user = ref(null);
		const route = useRoute();
		const router = useRouter();
		const likes = ref({});
		const iflike = ref(0);
		const favornum = ref([]);
		const favorites = ref({});
		onMounted(async () => {
			orderTypeId.value = route.query.orderTypeId;
			user.value = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : null;

			// 根据orderTypeId查询商家信息
			if (user.value) {
				let url1 = `FavoriteController/listFavoriteByUserId`;
				const favoriteData = {
					userId: user.value.userId
				};
				await axios.post(url1, favoriteData).then(response => {
					businessId.value = response.data.result;
				}).catch(error => {
					console.error('加载收藏列表失败:', error);
				});
				businessId.value.forEach(async item => {
					let url2 = `BusinessController/getBusinessById/${item}`;
					await axios.get(url2).then(response => {
						businessArr.value.push(response.data.result);
					}).catch(error => {
						console.error(error);
					});
				
				});
			}

				
			else {
				alert('用户未登录，请先登录！');
				router.push({ path: '/login' });
			}
		});

		const listCart = () => {
			let url3 = `CartController/listCart/${user.value.userId}`;
			axios.get(url3).then(response => {
				let cartArr = response.data.result;
				// 遍历所有商家列表
				businessArr.value.forEach(businessItem => {
					businessItem.quantity = 0;
					cartArr.forEach(cartItem => {
						if (cartItem.businessId === businessItem.businessId) {
							businessItem.quantity += cartItem.quantity;
						}
					});
				});
				businessArr.value.sort();
			}).catch(error => {
				console.error(error);
			});
		};
		const likeBusiness = async (businessId) => {
			console.log(businessId);
			if (likes.value[businessId].liked) {

				// 发送取消点赞请求
				let url5 = `LikesController/removeLikes/${user.value.userId}/${businessId}`;
				await axios.post(url5).then(() => {
					console.log('取消点赞成功');
				}).catch(error => {
					console.error(error);
				});
				// 取消点赞
				let url6 = `LikesController/getLikesBybusinessId/${businessId}`;
				await axios.get(url6).then(response => {
					favornum.value = response.data;
				});
				likes.value[businessId] = {
					liked: false,
					count: favornum.value || 0
				};

			} else {

				// 发送点赞请求
				let url7 = `LikesController/saveLikes/${user.value.userId}/${businessId}`;
				await axios.post(url7).then(() => {
					console.log('点赞成功');
				}).catch(error => {
					console.error(error);
				});
				// 点赞
				let url8 = `LikesController/getLikesBybusinessId/${businessId}`;
				await axios.get(url8).then(response => {
					favornum.value = response.data;
				});
				likes.value[businessId] = {
					liked: true,
					count: favornum.value || 0
				};

			}
		};
		const favoriteBusiness = (businessId) => {
			if (favorites.value[businessId].favorited) {
				// 发送取消收藏请求
				let url9 = `FavoriteController/removeFavorite/${user.value.userId}/${businessId}`;
				axios.post(url9).then(() => {
					console.log('取消收藏成功');
				}).catch(error => {
					console.error(error);
				});
				// 取消收藏
				favorites.value[businessId].favorited = false;
			} else {
				// 发送收藏请求
				let url10 = `FavoriteController/saveFavorite/${user.value.userId}/${businessId}`;
				axios.post(url10).then(() => {
					console.log('收藏成功');
				}).catch(error => {
					console.error(error);
				});
				// 收藏
				favorites.value[businessId].favorited = true;
			}
		};
		const commentBusiness = (businessId) => {
			router.push({ path: '/commentBusiness', query: { businessId } });
		};

		const toBusinessInfo = (businessId) => {
			router.push({ path: '/businessInfo', query: { businessId } });
		};

		return {
			businessArr,
			user,
			listCart,
			toBusinessInfo,
			likeBusiness,
			likes,
			favornum,
			favorites,
			favoriteBusiness,
			commentBusiness
		};
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business {
	width: 100%;
	margin-top: 12vw;
	margin-bottom: 60px;
}

.wrapper .business li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	border-bottom: solid 1px #DDD;
	user-select: none;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.wrapper .business li .business-img {
	/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
	position: relative;
}

.wrapper .business li .business-img img {
	width: 20vw;
	height: 20vw;
}

.wrapper .business li .business-img .business-img-quantity {
	width: 5vw;
	height: 5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
	border-radius: 2.5vw;
	display: flex;
	justify-content: center;
	align-items: center;
	/*设置成绝对定位，不占文档流空间*/
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}

.wrapper .business li .business-info {
	margin-left: 3vw;
}

.wrapper .business li .business-info h3 {
	font-size: 3.8vw;
	color: #555;
}

.wrapper .business li .business-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}

.wrapper .business li .business-actions {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 3vw;
	align-items: center;
}

.wrapper .business li .business-actions button {
	padding: 5vw 10vw;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background-color: #0097FF;
	color: white;
	width: 10vw;
	height: 5vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .business li .business-actions button:hover {
	background-color: #007ACC;
}

.wrapper .business li .business-actions button i {
	font-size: 4vw;
	/* 调整图标大小 */
}

.wrapper .business li .business-actions button.liked {
	background-color: #ff6347;
	/* 点赞后的颜色 */
}

.wrapper .business li .business-actions .like-count {
	margin-left: 5px;
	font-size: 14px;
	color: #0097FF;

}

.wrapper .business li .business-actions button.favorited {
	background-color: #ffcc00;
	/* 收藏后的颜色 */
}

.wrapper .business li .business-actions .dianzan {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.wrapper .business li .business-actions .dianzan span {
	display: flex;
	font-size: 5vw;
	justify-content: center;
}

.wrapper .business li .business-actions .dianzan button {
	display: flex;
	flex: 1;
}
</style>